<template>
  <div>
    <Form :model="formItem" label-position="top">
      <FormItem label="显示字段">
        <Row>
          <Col span="24">
            <Table size="small" border :columns="columns" :data="tableList" style="width:100%;">
              <template slot-scope="{row, index}" slot="sort">
                <Input v-model="tableList[index].sort"></Input>
              </template>
              <template slot-scope="{row, index}" slot="name">
                <Select v-model="tableList[i].field">
                  <Option v-for="(item, index) in fieldList" v-bind:key="index"></Option>
                </Select>
              </template>
            </Table>
          </Col>
        </Row>
        <Button type="primary" size="small" icon="ios-add" style="line-height: 21px;" @click="addTable()">添加新行</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
import { selectGiveServiceFieldList } from '@/api/medical.js'
export default {
  name: 'city-card',
  data () {
    return {
      formItem: {},
      tabData: [
        { label: '就医待办', value: '就医待办' },
        { label: '陪护就医', value: '陪护就医' },
        { label: '全市接送', value: '全市接送' },
        { label: '代排队排号', value: '代排队排号' },
        { label: '省时高效', value: '省时高效' }
      ],
      columns: [
        { title: '排序', slot: 'sort', align: 'center' },
        { title: '字段', slot: 'name', align: 'center' },
        { title: '操作', slot: 'sort', align: 'center' }
      ],
      tableList: [
        {}, {}, {}
      ],
      fieldList: []
    }
  },
  props: {},
  methods: {
    addTable () {
      console.log('adddddd')
      this.tableList.push({})
      this.tableList.length++
    },
    getGiveServiceFieldList () {
      selectGiveServiceFieldList().then((res) => {
        if (res.data.errcode === 0) {
          this.fieldList = res.data.data
        }
      })
    }
  },
  mounted () {
    this.getGiveServiceFieldList()
  }
}
</script>
<style scoped lang="less">
</style>
